<template>
  <div class="icon-div">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide>
          <div class="icon">
              <div class="iconfont zr">&#xe6ed;</div>
              <p>妆容</p>
          </div>
          <div class="icon">
              <div class="iconfont xx">&#xe6ec;</div>
              <p>鞋靴</p>
          </div>
          <div class="icon">
              <div class="iconfont">&#xe6eb;</div>
              <p>配饰</p>
          </div>
          <div class="icon">
              <div class="iconfont">&#xe6ea;</div>
              <p>箱包</p>
          </div>
          <div class="icon">
              <div class="iconfont">&#xe6e7;</div>
              <p>女装</p>
          </div>
          <div class="icon">
              <div class="iconfont nz">&#xe6e6;</div>
              <p>男装</p>
          </div>
          <div class="icon">
              <div class="iconfont gwd">&#xe6e5;</div>
              <p>购物袋</p>
          </div>
          <div class="icon">
              <div class="iconfont ms">&#xe6e4;</div>
              <p>帽饰</p>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="icon">
              <div class="iconfont sk">&#xe6e3;</div>
              <p>店铺</p>
          </div>
          <div class="icon">
              <div class="iconfont xx">&#xe6e9;</div>
              <p>围巾</p>
          </div>
        </swiper-slide>
      </swiper>

  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/varibles.styl'
@import '~styles/mixin.styl'
.icon-div
  width 100%
  padding-top .2rem
  .icon
    width 25%
    margin-bottom .28rem
    text-align center
    float left
    .iconfont
      font-size .68rem
      color pink
    .zr
      color #BA55D3
    .nz
      color #4169E1
    .gwd
      color #AFEEEE
    .xx
      color #DC143C
    .ms
      color #CD5C5C
    .sk
      color #87CEEB
    p
      font-size .16rem
      color $mainColor
      ellipsis()
</style>
